﻿@model Digital.WCFClient.ConfigService.UsersModel
@using Digital.Common.Mvc.Extensions
@{
    ViewBag.Title = "UserSafe";
    Layout = "~/Views/Shared/_LayoutDigital.cshtml";
}
<link href="../DigitalStyle/css/jquery.gritter.css" rel="stylesheet">
<script src="../DigitalStyle/js/bootstrap-wizard.min.js"></script>
<script src="../DigitalStyle/js/jquery.validate.min.js"></script>
<script src="../DigitalStyle/js/messages_cn.js"></script>
<script src="../DigitalStyle/js/JqueryToken.js"></script>
<script src="../DigitalStyle/js/jquery.gritter.min.js"></script>
<div class="pageheader">
    <h2><i class="fa fa-user"></i> 个人中心 <span>安全设置</span></h2>
    <div class="breadcrumb-wrapper">
        <span class="label">你的位置:</span>
        <ol class="breadcrumb">
            <li><a href="">个人中心</a></li>
            <li class="active">安全设置</li>
        </ol>
    </div>
</div>

<div class="contentpanel">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-btns">

                    </div>
                    <h4 class="panel-title">个人信息设置</h4>
                </div>
                <div class="panel-body panel-body-nopadding">
                    @Html.AntiForgeryToken()
                    <!-- BASIC WIZARD -->
                    <div id="validationWizard" class="basic-wizard">

                        <ul class="nav nav-pills nav-justified">
                            <li><a href="#vtab2" data-toggle="tab"> 基本信息</a></li>
                            <li><a href="#vtab3" data-toggle="tab"> 个人介绍</a></li>
                            <li><a href="#vtab4" data-toggle="tab"> 擅长技能</a></li>
                        </ul>

                        <form class="form" id="firstForm" onsubmit="return false">
                            <div class="tab-content">
                                <div class="tab-pane" id="vtab2">
                                    <div class="form-group">
                                        <label class="col-md-1 control-label">真实姓名</label>
                                        <div class="col-md-2">
                                            <input type="text" id="TrueName" value="@Model.UsersInfoModel.TrueName" class="form-control" required />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-1 control-label">昵称</label>
                                        <div class="col-md-2">
                                            <input type="text" id="NickName" value="@Model.UsersInfoModel.NickName" class="form-control" required />
                                        </div>
                                    </div>

                                    <div class="form-group">



                                        <label class="col-sm-1 control-label">性别</label>
                                        <div class="col-sm-5">
                                            <div class="rdio rdio-primary">
                                                <input type="radio" @Html.IsChecked(Model.UsersInfoModel.Sex == 0) name="sex" value="0" id="radioPrimary" />
                                                <label for="radioPrimary">男</label>
                                            </div>
                                            <div class="rdio rdio-primary">
                                                <input type="radio" @Html.IsChecked(Model.UsersInfoModel.Sex == 1) name="sex" value="1" id="radioPrimary1" />
                                                <label for="radioPrimary1">女</label>
                                            </div>
                                        </div>



                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-1 control-label">电话</label>
                                        <div class="col-md-2">
                                            <input type="text" id="Tel" value="@Model.UsersInfoModel.Tel" class="form-control" required />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-1 control-label">地区</label>
                                        <div class="col-md-4">
                                            <label class="col-md-1 control-label">省</label>
                                            <div class="col-md-5">
                                                <select id="Province" style="display: none;" class="form-control chosen-select">
                                                    <option value="0">请选择</option>
                                                </select>
                                            </div>
                                            <label class="col-md-1 control-label">市</label>
                                            <div class="col-md-5">
                                                <select id="City" style="display: none;" class="form-control chosen-select">
                                                    <option value="0">请选择</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">QQ</label>
                                        <div class="col-sm-5">
                                            <input type="text" id="QQ" value="@Model.UsersInfoModel.QQ" class="form-control" required />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">Email</label>
                                        <div class="col-sm-5">
                                            <input type="text" id="Email" value="@Model.UsersInfoModel.Email" class="form-control" required />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">邮编</label>
                                        <div class="col-sm-5">
                                            <input type="text" id="Zip" value="@Model.UsersInfoModel.Zip" class="form-control" required />
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane" id="vtab3">
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">个人介绍</label>
                                        <div class="col-sm-8">
                                            <textarea rows="5" class="form-control" id="BeGoodAtIntroduction">@Model.UsersInfoModel.BeGoodAtIntroduction</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="vtab4">
                                    <div class="form-group">

                                        <div class="col-sm-12">
                                            <div class="row">
                                                @{
                                                    foreach (var SkillModel in (System.Collections.ObjectModel.ObservableCollection<Digital.WCFClient.ConfigService.SkillsModel>)ViewBag.SkillList)
                                                    {
                                                        var IsCheck = string.Empty;
                                                        if (@Model.UsersInfoModel.GoodAtWhatModels != null)
                                                        {
                                                            if (@Model.UsersInfoModel.GoodAtWhatModels.Any(o => o.SkillId == SkillModel.SkillId && o.UpdateStatus != 3))
                                                            {
                                                                IsCheck = "Checked=Checked";
                                                            }
                                                        }

                                                        <div class="col-sm-3">
                                                            <div class="checkbox block"><label><input type="checkbox" @IsCheck name="Skill" value="@SkillModel.SkillId"> @SkillModel.Name</label></div>
                                                        </div>
                                                    }
                                                }

                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div><!-- tab-content -->
                        </form>

                        <ul class="pager wizard">

                            <li><button class="btn btn-primary" onclick="javascript:Save()">保 存</button></li>
                        </ul>

                    </div><!-- #validationWizard -->

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    jQuery(document).ready(function () {
        @{
              string IsProvince = "";
              if (Model.UsersInfoModel.ProvinceID != null && Model.UsersInfoModel.ProvinceID != 0)
              {
                  IsProvince = Model.UsersInfoModel.ProvinceID.ToString();
              }
              else
              {
                  IsProvince = "0";
              }
              string IsCity = "";
              if (Model.UsersInfoModel.CityID != null && Model.UsersInfoModel.CityID != 0)
              {
                  IsCity = Model.UsersInfoModel.CityID.ToString();
              }
              else
              {
                  IsCity = "0";
              }
          }
        function City(selectvalue)
        {
            jQuery.ajax({
                url: "../XML/City.xml",
                type: "get",
                datatype: "xml",
                success: function (xmldoc) {
                    jQuery("#City").find("option").remove();
                    jQuery("#City").append("<option  value='0'>请选择</option>");
                    jQuery(xmldoc).find("Root>Province[ID="+selectvalue+"]").each(function(){
                        jQuery(this).find("City").each(function(){
                            if(@IsCity==jQuery(this).attr("ID"))
                            {
                                jQuery("#City").append("<option selected value='"+jQuery(this).attr("ID")+"'>"+jQuery(this).text()+"</option>");
                            }
                            else
                            {
                                jQuery("#City").append("<option value='"+jQuery(this).attr("ID")+"'>"+jQuery(this).text()+"</option>");
                            }
                        })
                    })

                    jQuery("#City").chosen({ 'width': '100%', 'white-space': 'nowrap' });
                    $("#City").trigger("chosen:updated");
                }
            });
        }
        jQuery.ajax({
            url: "../XML/City.xml",
            type: "get",
            datatype: "xml",
            success: function (xmldoc) {

                var valueList = jQuery(xmldoc).find("Province");
                jQuery(valueList).each(function () {

                    if(@IsProvince == jQuery(this).attr("ID"))
                    {
                        jQuery("#Province").append("<option selected value='" + jQuery(this).attr("ID") + "'>" + jQuery(this).attr("Name") + "</option>");
                        City(jQuery(this).attr("ID"));
                    }
                    else
                    {
                        jQuery("#Province").append("<option value='" + jQuery(this).attr("ID") + "'>" + jQuery(this).attr("Name") + "</option>");
                    }
                })
                jQuery("#Province").chosen({ 'width': '100%', 'white-space': 'nowrap' });
                $("#Province").trigger("chosen:updated");
            }
        });



        jQuery("#Province").change(function(){
            var selectvalue = jQuery(this).val();
            City(selectvalue);
        });


        //jQuery('#validationWizard').bootstrapWizard();
        // With Form Validation Wizard
        var $validator = jQuery("#firstForm").validate({
            highlight: function (element) {

                jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {

                jQuery(element).closest('.form-group').removeClass('has-error');
            }
        });

        //jQuery('#validationWizard').bootstrapWizard({
        //    tabClass: 'nav nav-pills nav-justified nav-disabled-click',
        //    onTabClick: function(tab, navigation, index) {
        //        return true;
        //    },
        //    onNext: function(tab, navigation, index) {
        //        return false;
        //    }
        //});

        jQuery('#validationWizard').bootstrapWizard();


    });

    function Save()
    {
        var $valid = jQuery('#firstForm').valid();
        alert( $valid);
        if (!$valid) {

            $validator.focusInvalid();
            return false;
        }
        else
        {
            var TabIndex=  $('#validationWizard').bootstrapWizard('currentIndex');
            var val=$('input:radio[name="sex"]:checked').val();

            if(TabIndex==0)
            {

                $.ajaxAntiForgery({
                    type: "post",
                    data: { UsersInfoID:@Model.UsersInfoModel.UsersInfoID,TrueName:$("#TrueName").val(),NickName:$("#NickName").val(),Sex:val,ProvinceID:$("#Province").val(),CityID:$("#City").val(),QQ:$("#QQ").val(),Email:$("#Email").val(),Zip:$("#Zip").val(),Tel:$("#Tel").val()},
                    url: "/Users/UserSafe",
                    success: function (data) {
                        SaveInfo(true,"基础信息");
                        $('#validationWizard').bootstrapWizard('show',1);
                    }
                })
            }
            else if(TabIndex==1)
            {
                $.ajaxAntiForgery({
                    type: "post",
                    data: { UsersInfoID:@Model.UsersInfoModel.UsersInfoID,BeGoodAtIntroduction:$("#BeGoodAtIntroduction").val()},
                    url: "/Users/UserSafeIntroduction",
                    success: function (data) {
                        SaveInfo(true,"个人介绍");
                        $('#validationWizard').bootstrapWizard('show',2);
                    }
                })
            }
            else if(TabIndex==2)
            {
                var SkillStr="";
                $("[name='Skill']").each(function(){

                    if( $(this).prop('checked'))
                    {
                        SkillStr+=$(this).val()+",";
                    }
                })
                $.ajaxAntiForgery({
                    type: "post",
                    data: { UsersInfoID:@Model.UsersInfoModel.UsersInfoID,SkillStr:SkillStr},
                    url: "/Users/UserSafeSkill",
                    success: function (data) {
                        SaveInfo(true,"个人技能");
                    }
                })
            }
        }
    }

    function SaveInfo(IsSuccess,msg)
    {
        if(IsSuccess)
        {
            jQuery.gritter.add({
                title: '系统提示!',
                text: msg+'保存成功.',
                sticky: false,
                time: ''
            });
        }
        else
        {
            jQuery.gritter.add({
                title: '系统提示!',
                text: msg+'保存失败.',
                sticky: false,
                time: ''
            });
        }

    }
</script>
